# 功能：使用 Selenium 爬取 Vue.js 页面中的数据
# 环境：Python 3.7 + Selenium 3.141.0 + ChromeDriver 83.0.4103.39
# 注意：请先安装 ChromeDriver，并将其路径添加到环境变量中
# 运行：在命令行中执行 python SeleiumTest.py
# 输出：将会打印出 Vue.js 页面中的表格数据
# 代码如下：


from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
import time

# 初始化 WebDriver（这里以 Chrome 为例）

# 使用原始字符串来指定 ChromeDriver 的路径
driver_path = r'E:\workspace\PycharmProjects\CrawManage\chromedriver.exe';
service = Service(driver_path)
driver = webdriver.Chrome(service=service)

try:
    # 导航到目标 Vue.js 页面
    driver.get('http://121.29.49.63:8080/#/list')

    # 等待一定时间，让页面完全加载（可以根据实际情况调整时间）
    time.sleep(20)  # 或者使用 WebDriverWait

    # 获取特定元素的数据，假设我们要获取一个 class 为 'data-item' 的元素
    elements = driver.find_elements(By.CLASS_NAME, 'el-table__header')

    # 抓取表格数据
    rows = driver.find_elements(By.CSS_SELECTOR, 'table tbody tr')
    table_data = []
    for row in rows:
        columns = row.find_elements(By.TAG_NAME, 'td')
        row_data = [col.text for col in columns]
        table_data.append(row_data)

    for data in table_data:
        print(data)


finally:
    # 关闭浏览器
    driver.quit()
